<template>
  <Common>
    <template v-slot:top>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        size="medium "
      >
        <el-form-item label="用户名:">
          <el-input
            v-model="form.userName"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input
            v-model="form.department"
            placeholder="请输入部门"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色:">
          <el-select v-model="form.userRole" placeholder="请选择角色">
            <el-option
              v-for="item in roles"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="selectData"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button @click="onReset" icon="el-icon-refresh-left"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="add" icon="el-icon-plus"
            >添加账号</el-button
          >
        </el-form-item>
      </el-form>
    </template>
    <template v-slot:table>
      <el-table
        :data="tableData"
        v-loading="loading"
        height="90%"
        border
        style="width: 100%"
      >
        <el-table-column prop="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="200">
        </el-table-column>
        <el-table-column prop="userType" label="账户类型" width="120">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.userType == 'root'"
              >系统内置</el-tag
            >
            <el-tag v-if="scope.row.userType == 'visitor'">活动用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userRole" label="角色" width="120">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.userRole == 'admin'"
              >管理员</el-tag
            >
            <el-tag v-if="scope.row.userRole == 'manage'">业务主管</el-tag>
            <el-tag type="success" v-if="scope.row.userRole == 'clerk'"
              >业务专职</el-tag
            >
            <el-tag type="warning" v-if="scope.row.userRole == 'unit'"
              >项目单位</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="realName" label="真实姓名" width="120">
        </el-table-column>
        <el-table-column prop="department" label="部门" width="150">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号"> </el-table-column>
        <el-table-column prop="userMail" label="电子邮箱"> </el-table-column>

        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-link
              :disabled="scope.row.userType == 'root'"
              :underline="false"
              type="primary"
              @click="edit(scope.row)"
              icon="el-icon-edit"
              >编辑</el-link
            >
            <el-link
              :disabled="scope.row.userType == 'root'"
              style="margin: 0px 16px"
              type="danger"
              :underline="false"
              @click="del(scope.row)"
              icon="el-icon-delete"
              >删除</el-link
            >
            <el-link
              :disabled="scope.row.userType == 'root'"
              :underline="false"
              type="warning"
              @click="reset(scope.row)"
              icon="el-icon-refresh-left"
              >重置</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-slot:pagination>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <AddAccountVue
        ref="addEdit"
        @getTable="getTable"
        :data="roles"
      ></AddAccountVue>
    </template>
  </Common>
</template>

<script>
import Common from "@/components/common.vue";

import { getUsers, getRoles, resetPass, delUser } from "@/common/api";
import AddAccountVue from "./addAccount.vue";
export default {
  name: "Account",
  props: {},
  components: { Common, AddAccountVue },
  computed: {},
  data() {
    return {
      form: {
        userName: "",
        department: "",
        userRole: "",
      },
      tableData: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      roles: [],
    };
  },
  mounted() {},
  created() {
    this.getTable();
    this.getRoles();
  },
  methods: {
    getRoles() {
      getRoles().then((res) => {
        if (res.success) {
          for (let key in res.data) {
            this.roles.push({ label: res.data[key], value: key });
          }
        } else {
          this.$errorMsg(res.message);
        }
      });
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getTable();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getTable();
    },

    selectData() {
      this.pageNum = 1;
      this.getTable();
    },
    getTable() {
      this.loading = true;
      let param = {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getUsers(param)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.tableData = res.data.records;
            this.total = res.data.total; 
            this.tableData.forEach((i, index) => {
              i.index = (this.pageNum - 1) * this.pageSize + index + 1;
            });
          } else {
            // this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    edit(item) {
      this.$refs.addEdit.dialogFormVisible = true;
      this.$refs.addEdit.type = "edit";
      this.$refs.addEdit.getDetail(item.id);
    },
    del(item) {
      this.$confirm("是否确认删除此账号?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delUser({ id: item.id }).then((res) => {
            if (res.success) {
              this.$successMsg(res.message);
              this.getTable();
            } else {
              this.$errorMsg(res.message);
            }
          });
        })
        .catch(() => {});
    },
    reset(item) {
      console.log(item, "12121");
      this.$confirm("是否确认重置此账号?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetPass({ userName: item.userName }).then((res) => {
            if (res.success) {
              this.$successMsg(res.message);
              this.getTable();
            } else {
              this.$errorMsg(res.message);
            }
          });
        })
        .catch(() => {});
    },
    onReset() {
      this.form = {
        userName: "",
        department: "",
        userRole: "",
      };
    },
    add() {
      this.$refs.addEdit.dialogFormVisible = true;
      this.$refs.addEdit.type = "add";
    },
  },
};
</script>


<style lang="scss" scoped>
</style>